<template>
  <div class="fullscreen-content" @click="">
    <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="onchange" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import localforage from "localforage";

const color = ref("rgba(255, 69, 0, 0.68)");
const predefineColors = ref([
  "rgb(220, 223, 230)",
  "#409eff",
  "rgb(121.3, 187.1, 255)",
  "rgb(159.5, 206.5, 255)",
  "rgb(197.7, 225.9, 255)",
  "rgb(216.8, 235.6, 255)",
  "rgb(235.9, 245.3, 255)",
  "rgb(51.2, 126.4, 204)",
  "#67c23a",
  "rgb(148.6, 212.3, 117.1)",
  "rgb(179, 224.5, 156.5)",
  "rgb(209.4, 236.7, 195.9)",
  "rgb(224.6, 242.8, 215.6)",
  "rgb(239.8, 248.9, 235.3)",
  "rgb(82.4, 155.2, 46.4)",
  "#e6a23c",
  "rgb(237.5, 189.9, 118.5)",
  "rgb(242.5, 208.5, 157.5)",
  "rgb(247.5, 227.1, 196.5)",
  "rgb(250, 236.4, 216)",
  "rgb(252.5, 245.7, 235.5)",
  "rgb(184, 129.6, 48)",
  "#f56c6c",
  "rgb(248, 152.1, 152.1)",
  "rgb(250, 181.5, 181.5)",
  "rgb(252, 210.9, 210.9)",
  "rgb(253, 225.6, 225.6)",
  "rgb(254, 240.3, 240.3)",
  "rgb(196, 86.4, 86.4)",
  "#f56c6c",
  "rgb(248, 152.1, 152.1)",
  "rgb(250, 181.5, 181.5)",
  "rgb(252, 210.9, 210.9)",
  "rgb(253, 225.6, 225.6)",
  "rgb(254, 240.3, 240.3)",
  "rgb(196, 86.4, 86.4)",
  "#909399",
  "rgb(177.3, 179.4, 183.6)",
  "rgb(199.5, 201, 204)",
  "rgb(221.7, 222.6, 224.4)",
  "rgb(232.8, 233.4, 234.6)",
  "rgb(243.9, 244.2, 244.8)",
  "rgb(115.2, 117.6, 122.4)",
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#c7158577"
]);

onMounted(async () => {
  try {
    const value = (await localforage.getItem(
      "css--practice-backgroud-color"
    )) as string; // 加载数据
    color.value = value || "rgb(220, 223, 230)"; // 更新存储值
    document.documentElement.style.setProperty(
      "--practice-backgroud-color",
      color.value
    );
  } catch (err) {
    console.error("加载数据时出错:", err);
  }
});

const onchange = async (newcolor: string) => {
  color.value = newcolor;
  document.documentElement.style.setProperty(
    "--practice-backgroud-color",
    newcolor
  ); // 修改 CSS 变量
  await localforage.setItem("css--practice-backgroud-color", newcolor); // 保存数据
};
</script>

<style scoped>
.fullscreen-content {
  width: 40px;
  height: 100%;
  /* margin-right: 10px; */
  /* background-color: #f0f0f0; */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  icon {
    font-weight: 600;
    width: 52px;
    height: 52px;
  }
}

.fullscreen-content:hover {
  background-color: var(--el-color-primary-light-9);
}
</style>
